<template>
  <el-dialog
    v-model="visible"
    title="打印格式设置"
    width="900px"
    :before-close="handleClose"
    class="format-dialog"
    top="5vh"
    custom-class="custom-format-dialog"
  >
    <!-- 询（讯）问笔录主标签 -->
    <el-tabs v-model="activeMainTab" class="main-tabs">
      <el-tab-pane label="询（讯）问笔录" name="inquiry">
        <!-- 六个子标签 -->
        <el-tabs v-model="activeSubTab" class="sub-tabs" type="card">
          <el-tab-pane label="行政治安" name="admin">
            <FormatTabContent :activeTab="'admin'" :formatSettings="formatSettings" />
          </el-tab-pane>
          <el-tab-pane label="刑事" name="criminal">
            <FormatTabContent :activeTab="'criminal'" :formatSettings="formatSettings" />
          </el-tab-pane>
          <el-tab-pane label="交通事故" name="traffic">
            <FormatTabContent :activeTab="'traffic'" :formatSettings="formatSettings" />
          </el-tab-pane>
          <!-- <el-tab-pane label="当场盘查、盘问" name="onsite">
            <FormatTabContent :activeTab="'onsite'" :formatSettings="formatSettings" />
          </el-tab-pane>
          <el-tab-pane label="林业询问" name="forestry">
            <FormatTabContent :activeTab="'forestry'" :formatSettings="formatSettings" />
          </el-tab-pane>
          <el-tab-pane label="纪检调查、纪检谈话、信访谈话" name="discipline">
            <FormatTabContent :activeTab="'discipline'" :formatSettings="formatSettings" />
          </el-tab-pane> -->
        </el-tabs>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('reset')">重置</el-button>
        <el-button @click="$emit('cancel')">取消</el-button>
        <el-button type="primary" @click="$emit('confirm')">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import FormatTabContent from './FormatTabContent.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  formatSettings: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:visible', 'reset', 'cancel', 'confirm'])

// 标签页状态
const activeMainTab = ref('inquiry')
const activeSubTab = ref('admin')

const handleClose = (done) => {
  emit('cancel')
  done()
}

// 监听visible变化
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})
</script>

<style scoped>
/* 对话框样式 */
:deep(.format-dialog) {
  border-radius: 8px;
}

:deep(.format-dialog .el-dialog__header) {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  padding: 20px 24px 16px;
}

:deep(.format-dialog .el-dialog__title) {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

:deep(.format-dialog .el-dialog__body) {
  padding: 0;
  max-height: calc(85vh - 120px);
  overflow-y: auto;
}

/* 标签页样式 */
:deep(.main-tabs) {
  margin-bottom: 0;
}

:deep(.main-tabs .el-tabs__header) {
  margin-bottom: 20px;
  background-color: #fff;
}

:deep(.main-tabs .el-tabs__item) {
  font-size: 14px;
  font-weight: 500;
  padding: 0 20px;
  height: 42px;
  line-height: 42px;
}

:deep(.sub-tabs) {
  margin-top: 0;
}

:deep(.sub-tabs .el-tabs__header) {
  margin-bottom: 24px;
  background-color: #f8f9fa;
  padding: 0 16px;
  border-radius: 6px;
}

:deep(.sub-tabs .el-tabs__item) {
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  margin-right: 8px;
  border-radius: 4px 4px 0 0;
  transition: all 0.3s ease;
}

:deep(.sub-tabs .el-tabs__item:hover) {
  background-color: #e3f2fd;
}

:deep(.sub-tabs .el-tabs__item.is-active) {
  background-color: #2196f3;
  color: #fff;
}

:deep(.sub-tabs .el-tabs__active-bar) {
  display: none;
}

/* 按钮样式 */
:deep(.dialog-footer) {
  padding: 16px 24px;
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef;
  text-align: right;
}

:deep(.dialog-footer .el-button) {
  margin-left: 12px;
  padding: 8px 20px;
  font-size: 13px;
  border-radius: 4px;
}

:deep(.dialog-footer .el-button--primary) {
  background-color: #2196f3;
  border-color: #2196f3;
}

:deep(.dialog-footer .el-button--primary:hover) {
  background-color: #1976d2;
  border-color: #1976d2;
}

/* 滚动条优化 */
:deep(.el-dialog__body)::-webkit-scrollbar {
  width: 8px;
}

:deep(.el-dialog__body)::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 4px;
}

:deep(.el-dialog__body)::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
  transition: background 0.3s ease;
}

:deep(.el-dialog__body)::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 弹框内容区域 */
:deep(.main-tabs .el-tabs__content) {
  padding: 20px 24px;
}

:deep(.sub-tabs .el-tabs__content) {
  padding: 16px 0;
}
</style>
